// 重置样式
* {
  box-sizing: border-box;
 }

 html {
   min-height: 100%;
   height: 100%;
   font-size: 14px;
 }
 body {
   height: 100%;
   color: #333;
   min-width: 100%;
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   &::-webkit-scrollbar {
    display: none;
   }
}

 ul,
 h1,
 h3,
 h4,
 p,
 dl,
 dd {
   padding: 0;
   margin: 0;
 }

 a {
   text-decoration: none;
   color: #333;
   outline: none;
 }

 i {
   font-style: normal;
 }

 input[type="text"],
 input[type="search"],
 input[type="password"],
 input[type="checkbox"]{
   padding: 0;
   outline: none;
   border: none;
   -webkit-appearance: none;
   &::placeholder{
     color: #ccc;
   }
 }

 img {
   max-width: 100%;
   max-height: 100%;
   vertical-align: middle;
 }

 ul {
   list-style: none;
 }

 #app {
   background: #fff;
   height: 100%;
 }

 .flex-box-div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: #fafafa;
 }
 .container {
    flex: 1;
   width: 345px;;
   margin: 0 auto;
   height: max-content;
   position: relative;
 }

 .ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }

 .ellipsis-2 {
   word-break: break-all;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
 }

 .border {
  border: 1px solid #eaeaea;
 }

 .fl {
   float: left;
 }

 .fr {
   float: right;
 }

 .clearfix:after {
   content: ".";
   display: block;
   visibility: hidden;
   height: 0;
   line-height: 0;
   clear: both;
 }

  .fade {
    &-leave-active {
      position: absolute;
      width: 100%;
      transition: opacity 0.5s 0.2s;
      z-index: 1;
    }
    &-leave-to {
      opacity: 0;
    }
  }

.card {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto 10px;
  padding: 10px;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center-sa {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-end {
  justify-content: flex-end;
}
.ai-end {
  align-items: flex-end;
}

.flex-column-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.price {
  color: @priceColor;
}
.text-light-gray {
  color: #666;
}
.text-gray {
  color: #999;
}

.blod {
  font-weight: bold;
}

.overflow-y {
  flex: 1;
  overflow-y: auto;
  max-height: 100%;
}

.bgc-white {
  background-color: #fff;
}
.pink {
  background-color: pink;
}

.iblock {
  display: inline-block;
}

.grey {
  color: #999;
}

.plr {
  padding-left: 15px;
  padding-right: 15px;
}

.fixed-end {
  position: fixed;
  left: 0;
  bottom: 0;
}

/*
    margin padding fontSize width 通用样式表
    免去你每次重写样式的烦恼
    marked by Jacky
*/
.loopStyle(@counter) when (@counter > 0) {
  .p@{counter} {
    padding: (1px * @counter);
  }
  .pt@{counter} {
    padding-top: (1px * @counter);
  }
  .pr@{counter} {
    padding-right: (1px * @counter);
  }
  .pb@{counter} {
    padding-bottom: (1px * @counter);
  }
  .pl@{counter} {
    padding-left: (1px * @counter);
  }
  .m@{counter} {
    margin: (1px * @counter);
  }
  .mt@{counter} {
    margin-top: (1px * @counter);
  }
  .mr@{counter} {
    margin-right: (1px * @counter);
  }
  .mb@{counter} {
    margin-bottom: (1px * @counter);
  }
  .ml@{counter} {
    margin-left: (1px * @counter);
  }
  
  .ls {
    letter-spacing: (1px * @counter);
  }
  .fz-@{counter} {
    font-size: (1px * @counter);
  }
  .height-@{counter} {
    height: 1px * @counter;
  }
  .height@{counter} {
    height: 1% * @counter;
  }
  .width-@{counter} {
    width: 1px * @counter;
  }
  .width@{counter}{
    width: 1% * @counter;
  }
  .loopStyle((@counter - 1));    // 递归调用自身
}
 
.loopStyle(100);